<template>
    <div>
        <el-breadcrumb separator="/" style="font-size: 16px">
            <el-breadcrumb-item>日程日志</el-breadcrumb-item>
            <el-breadcrumb-item><strong>添加日程信息</strong></el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-card>
                <h3>日程记录内容:</h3><br>
                <el-input
                        type="textarea"
                        :autosize="{minRows:10,maxRows:50}"
                        placeholder="请输入内容"
                        show-word-limit
                        maxlength="1000"
                        v-model="scheduleDTO.scheduleContent"
                        resize="none"
                        name="scheduleContent"
                        class="textarea"
                        wrap="hard"
                        clearable
                        @input="checkForm"></el-input>
                <h3><strong style="color: #e73c7e">*</strong>开始日期-结束日期:</h3>
                <br>
                <el-date-picker
                        v-model="scheduleDTO.time"
                        type="datetimerange"
                        placeholder="选择日期"
                        name="startTime"
                        range-separator="至"
                        @input = "checkForm"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="{
                            disabledDate: (time) => { return time.getTime() < new Date().getTime() }
                        }"
                        ></el-date-picker>
                <h3><strong style="color: #e73c7e">*</strong>提醒时间:</h3>
                <br>
                <el-date-picker
                        v-model="scheduleDTO.reminderTime"
                        type="datetime"
                        placeholder="选择日期"
                        name="this.reminderTime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @input = "checkForm"
                        :picker-options="{
                            disabledDate: (time) => { return time.getTime() < new Date().getTime() }
                        }"
                        ></el-date-picker>
                <div class="button">
                    <el-button  round type="primary" @click="add()" :disabled="!isFormComplete" >添加</el-button>
                    <el-button  round type="info" @click="back()" >取消</el-button>
                </div>
        </el-card>
    </div>

</template>
<script>
export default {
    data: function () {
        return {
            scheduleDTO:{
                id:"",
                scheduleContent:"",
                time:[],
                reminderTime:""
            },
            isFormComplete:false,
            fullscreenLoading: false,
            user: {
             userId: ""
            },
            data:""+new Date().toLocaleDateString()+" "+new Date().toLocaleTimeString()
        }
    },
    methods: {
        //6,检测是否所有信息都填写完整后才能将添加按钮变为可用
        checkForm() {
            // 判断所有信息是否都存在
            if (
                this.scheduleDTO.time.length &&
                this.scheduleDTO.reminderTime
            ) {
                this.isFormComplete = true;
            } else {
                this.isFormComplete = false;
            }
        },
        //7,返回日程管理页面
        back(){
            this.$router.push("/schedule");
        },
        // 添加一条日志并且退回到日程管理界面
        add(){
            const timestamp = new Date(this.scheduleDTO.reminderTime).getTime();
            const startTimemp = new Date(this.scheduleDTO.time[0]).getTime();
            const currentTime = new Date();
            if (timestamp <= currentTime.getTime()) {
                this.alerts('选择的【提醒时间】小于当前时间【'+currentTime.toLocaleDateString()+' '+currentTime.toLocaleTimeString()+'】无法进行选择','提示');
            }else if(startTimemp<=currentTime.getTime()){
                this.alerts('选择的【开始时间】小于当前时间【'+currentTime.toLocaleDateString()+' '+currentTime.toLocaleTimeString()+'】无法进行选择','提示');
            }else {
                const delay = timestamp - currentTime.getTime();
                setTimeout(() => {
                }, delay);
                this.scheduleDTO.id = this.user.userId;
                this.axios.post("/api/schedule/add",this.scheduleDTO).then( (response)=>{
                    let status = response.data.code;
                    let message = response.data.message;
                    switch (status) {
                        case 10003:
                            this.$message.success(message);
                            break;
                        case 402:
                        case 10001:
                        case 10002:
                            this.$message.error(message);
                            break;
                    }
                    this.isFormComplete = false;
                    this.$router.push("/schedule");
                    location.reload();
                });
            }
        },
        alerts(message,title) {
            this.$alert(message,title , {
                confirmButtonText: '确定',
                callback: action => {
                }
            });
        }
    },
    mounted() {
        this.user = localStorage.getItem('user')?JSON.parse(localStorage.user):null;
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const hour = now.getHours();
        const minute = now.getMinutes();
        this.scheduleDTO.time = [new Date(year, month - 1, day, hour, minute), new Date(year, month - 1, day, hour, minute)];
        this.scheduleDTO.reminderTime = new Date(year, month - 1, day, hour, minute);
        this.checkForm();
    }
}
</script>
<style>
.button{
    text-align: center;
    display: block;
    margin: 24px auto;
}
</style>